<template>
<div class="tag-content">
    <head>
        <h1 class="author">
            {{content.author}}的便签
        </h1>
        <div class="control">
            <span class="editor" @tap='editor'>
                <i-icon type="editor" :size="icon.size" />
            </span>
            <span class="delete" @tap='del'>
                <i-icon type="trash" :size="icon.size" />
            </span>
        </div>
    </head>

    <div class="container">
        <div class="time">
            <span class="day">
                {{createTime.day}}日
            </span>
            <span class="month">
                {{createTime.month}}月
            </span>
            
        </div>
        <artic>
            <p class="text" v-for='(item, index) of content.text' :key='index'>
                {{item}}
            </p>
        </artic>

        <div class="imgs" v-if='content.imgs&& imgs.length'>
            <div class="summary-img" v-for='(url, index) of imgs' :key='index'>
                <div>
                    <img :src="url" alt="">
                </div>
            </div>
        </div>

    </div>

</div>
</template>

<script>
import {mapActions,  mapState} from 'vuex';

export default {
    data: function() {	
        return {
            content: {},
            tagId: '',
            icon:{size: 28},
        }
    },
    computed:{

        ...mapState('http', ['baseUrl']),

         imgs(){
            let baseUrl = this.baseUrl;
            let arr = this.content.imgs || [] 
            return arr.map(url =>{
                return baseUrl + url;
            })
        },

        createTime(){
            let date = {}; 
            if(this.content.createTime){
                let time = new Date(this.content.createTime)
                let day = time.getDate();
                let month = time.getMonth();
                date = {
                    day,
                    month: month + 1
                }
            }

            return date
        }
    },
    methods: {
        ...mapActions('http', ['getLists', 'deleteTag']),

        editor(){
            wx.navigateTo({
                url: `/pages/editor/main?id=${this.tagId}`
            })
        },
        
        async del(){
            let isSccess = await this.deleteTag(this.tagId);

            if(isSccess){
               
                wx.showToast({
                    title: '成功',
                    icon: 'success',
                    success: () =>{
                        setTimeout(() =>{
                            wx.navigateBack({delta: 1})
                        }, 1000)
                    }
                })

            }else{
                wx.showModal({
                    title: '无法删除，请检查网络是否可用',
                    showCancel: false
                })
            }
        },
    
        async init(){
            let tags = await this.getLists(this.tagId);
            this.content = tags[0];
        }
    },

    async onLoad(query){
        this.tagId = query.id;
        this.init();
    }
}
</script>

<style scoped lang='less'>


.tag-content{
    padding-top: 120rpx;

    head{
        display: flex;
        justify-content: space-between;
        align-items: baseline;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        
        padding: 3*@interval;
        background: @mainColor;
        color:#fff;
    }

    .delete{
        margin-left: 3*@interval;
    }
    

    .container{
        padding: 3*@interval;
        background: #fff;
    }

    .summary-img{
        
        &:extend(.img-box);
        margin-top: 3*@interval;
        height: 380rpx;
    }

    p{
        line-height: 1.8;
    }

    .time{
        margin-bottom: 3*@interval;
        color: @darkColor;

        .day{
            font-size: 64rpx;
        }
    }
}

</style>